<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    html,
    body {
        height: 100%;
    }

    .wrap {
        /* height: 2000px; */
        height: 100%;
        /* background-color: skyblue; */
        position: relative;
    }

    .head {
        height: 120px;
        line-height: 120px;
        background-color: rgba(255, 255, 255, 0.5);
        /* position: fixed; */
        width: 1905px;

    }

    .minleft {
        float: left;
        padding-left: 3%;
        /* margin-right: 30px; */
    }

    .minleft>img {
        vertical-align: middle;
        margin-right: 20px;
    }

    .nav {
        float: left;
        display: flex;
        font-size: 20px;
        width: 1200px;
        min-width: 1000px;
        justify-content: space-evenly;
        color: #4A4A4A;
        margin-bottom: -10px;

    }

    .nav li {
        height: 115px;
        margin-bottom: -5px;
        transition: 0.2s;
    }

    .nav>li:hover {
        border-bottom: 5px red solid;
        color: red;
    }

    .nav2 {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        margin-left: 50px;
        color: #4A4A4A;
        font-size: 20px;
    }

    .nav2>li {
        width: 100px;
        text-align: center;
    }

    .minright {
        height: 100%;
        /* width: 80px; */
        background-color: red;
    }

    .minright>img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    .minmiddle>img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    .text>img {
        width: 10px;
        height: 10px;
        margin-left: 5px;
    }

    .swiper-container {
        width: 1905px;
        height: 600px;
        z-index: 0;
    }
    .middle{
        /* margin-top: 600px; */
        width: 1200px;

        display: flex;
        margin: 0 auto;
        margin-top: 600px;
        /* justify-content: space-around; */
        position: relative;
        z-index: 2;
    }
    .middle>ul{
        align-self: flex-end;
        width: 250px;
        margin-left: -50px;
    }
    .item{
        /* position: absolute; */
        margin-top: -100px;
        width: 250px;
        height: 300px;
        /* border: 1px red solid; */
        box-shadow: 0px 10px 20px 0px #ccc;
        margin-left: 20px;
        transition: 1s;
    }
    .item:hover .img_url{
        transform: translateY(-100px);
        opacity: 0;
        /* width: 50px; */
    }
    .item:hover{
        background-color: red;
        transition: 2s;
        border-radius: 10px;
    }
    .item:hover .text2{
        color: white;
    }
    .item>p{
        text-align: center;
        font-size: 25px;
        margin-top: 10px;
        transition: 1s;
        color: #8C8C8C;
    }
    .item>img{
        transition: 1s;
        width: 100%;
        position: relative;
        z-index: 1;
    }
    .ico{
        width: 60px;
        height: 60px;
        background-color: red;
        border-radius: 50%;
        position: relative;
        /* position: absolute; */
        margin-left: 70px;
        margin-top: -30px;
        z-index: 2;
        
    }
    .item2{
        color: #197019;
        font-size: 40px;
    }
    .item3{
        font-size: 14px;
    }
    .middle2{
        width: 100%;
        background-color: #FBFAF8;
        margin-top: 30px;
        height: 300px;
        padding-top: 30px;
    }
    .middle2-inner{
        width: 1300px;
        /* background-color: violet; */
        height: 100%;
        margin: 0 auto;
    }
    .text3{
        color: #beb2b6;
        font-size: 20px;
        font-weight: lighter;
    }
    .innerleft{
        float: left;
        width: 800px;
        height: 100%;
        /* background-color: violet; */
    }
    .innerright{
        float: left;
        width: 450px;
        height: 100%;
        /* background-color: tomato; */
    }
    .inneritem{
        width: 290px;
        height: 200px;
        float: left;
        margin-right: 20px;
    }
    .inneritem>img{
        width: 290px;
        height: 200px;
    }
    .itemleft{
        margin-top: 80px;
        /* padding-left: 20px; */
    }
    .innerright>p>span{
        font-size: 20px;
        margin-right: 30px;
        font-weight: lighter;
    }
    .middle3{
        width: 1300px;
        height: 400px;
        margin: 0 auto;
        margin-top: 100px;
        /* background-color: violet; */
    }
    .banner>div{
        float: left;
    }
</style>
<link rel="stylesheet" href="./swiper-4.5.3/dist/css/swiper.css">

<body>
    <div class="wrap">
        <div class="head">
            <div class="minleft"><img src="./logo.png" alt=""></div>
            <ul class="nav">
                <li>首页</li>
                <li>走进荣盛</li>
                <li>企业文化</li>
                <li>新闻中心</li>
                <li>产品服务</li>
                <li>投资者关系</li>
                <li>社会责任</li>
                <li>加入荣盛</li>
                <li>廉洁荣盛</li>
                <li>联系我们</li>
            </ul>
            <ul class="nav2">
                <li class="text">荣盛站群<img src="./images/小三角.png" alt=""></li>
                <li class="minmiddle"><img src="./images/二维码.png" alt=""></li>
                <li class="minright"><img src="./images/搜索_o.png" alt=""></li>
            </ul>
            <!-- <div class="middle">
                <img src="./images/1.jpg" alt="">
            </div> -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
        </div>
        <div class="middle">
            <ul>
                <li class="item1">荣盛发展0021146</li>
                <li class="item2">4.53 <img src="./images/择律-选择费用-倒三角形-反对.png" alt="" width="15px" height="15px"></li>
                <li class="item3">截至2021-10-26 15:00:03</li>
            </ul>
           <div class="item"><img src="./images/1.png" alt="" class="img_url"> <div class="ico"><img src="./images/c1.png" alt=""></div><p class="text2">城市住宅</p></div>
           <div class="item"><img src="./images/1.png" alt="" class="img_url"> <div class="ico"><img src="./images/c1.png" alt=""></div><p class="text2">城市住宅</p></div>
           <div class="item"><img src="./images/1.png" alt="" class="img_url"> <div class="ico"><img src="./images/c1.png" alt=""></div><p class="text2">城市住宅</p></div>
           <div class="item"><img src="./images/1.png" alt="" class="img_url"> <div class="ico"><img src="./images/c1.png" alt=""></div><p class="text2">城市住宅</p></div>
           <div class="item"><img src="./images/1.png" alt="" class="img_url"> <div class="ico"><img src="./images/c1.png" alt=""></div><p class="text2">城市住宅</p></div>
        </div>
        <div class="middle2">
            <div class="middle2-inner">
                <p class="text3">NEWS CENTER</p>
                <div class="innerleft">
                    
                    <div class="inneritem">
                        <p style="margin-bottom: 20px;"><span style="font-size: 20px;">新闻中心</span><span style="float: right;color: red;">更多</span></p>
                        <img src="./images/8.jpg" alt="">
                    </div>
                    <div class="itemleft">
                        <p style="font-size: 30px;color: red;margin-bottom: 20px;">05-11</p>
                        <p style="margin-bottom: 10px;">荣盛发展:关于控股股东一致行动人增持公司股份计划时间过半...</p>
                        <p style="font-size: 14px;">荣盛发展:关于控股股东一致行动人增持公司股份计划时间过半...</p>
                    </div>
                </div>
                <div class="innerright">
                    <p><span style="border-bottom: 2px red solid;color: red;padding-bottom: 10px;">公司新闻</span><span>媒体报道</span><span>最新公告</span></p>
                    <ul style="margin-top: 30px;">
                        <li style="margin-bottom: 10px;">
                            <div style="border-right: red 1px dashed; float: left;padding-right: 30px;text-align: center;margin-right: 20px;">
                                <p style="font-size: 40px;color: #999999;">15</p>
                                <p style="color: #999999;">2021.09</p>
                            </div>
                            <div>
                                <p style="margin-bottom: 10px;font-size: 20px;color: #999999">逆风飞扬 稳中拓进|祝贺荣盛发...</p>
                                <p style="font-size: 14px;color: #999999">2021年荣盛发展凭借稳健业绩、良好的投</p>
                                <p style="font-size: 14px;color: #999999">资理念、持续提升的产品力与服务力以及</p>
                            </div>
                        </li>
                        <li>
                            <div style="border-right: red 1px dashed; float: left;padding-right: 30px;text-align: center;margin-right: 20px;color: #999999;">
                                <p style="font-size: 40px;color: #999999;">15</p>
                                <p style="color: #999999;">2021.09</p>
                            </div>
                            <div>
                                <p style="margin-bottom: 10px;font-size: 20px;color: #999999">逆风飞扬 稳中拓进|祝贺荣盛发...</p>
                                <p style="font-size: 14px;color: #999999">2021年荣盛发展凭借稳健业绩、良好的投</p>
                                <p style="font-size: 14px;color: #999999">资理念、持续提升的产品力与服务力以及</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="middle3">
            <div class="banner">
                <div style="background-image: url(./images/9.jpg);width: 350px;height: 180px;"><p style="color: #999999;margin-top: 20px;">ABOUT US</p><p>走进荣盛</p></div>
               <div style="background-image: url(./images/10.jpg);width: 220px;height: 180px;background-size: cover;"><p style="color: #999999;margin-top: 20px;">CULTURE</p><p>企业文化</p></div>
               <div style="background-image: url(./images/11.jpg);width: 220px;height: 180px;"><p style="color: #999999;margin-top: 20px;">CULTURE</p><p>企业文化</p></div>
               <div style="background-image: url(./images/12.jpg);width: 220px;height: 180px;"><p style="color: #999999;margin-top: 20px;">CULTURE</p><p>企业文化</p></div>
               <div style="background-image: url(./images/13.jpg);width: 220px;height: 180px;"><p style="color: #999999;margin-top: 20px;">CULTURE</p><p>企业文化</p></div>
            </div>
        </div>
    </div>
    <script src="./swiper-4.5.3/dist/js/swiper.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            //   direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
                // el: '.swiper-scrollbar',
            },
        })
        browserRedirect()
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid ||
                bIsCE || bIsWM) {
                    window.location="../../index.html";
            }
        }

    </script>
</body>

</html>